SVG Colors, Gradients, & Patterns by Amelia Bellamy-Royds

Author:Amelia Bellamy-Royds
Language: eng
Format: epub

[ <ending-shape> || <size> ]? [ at <position> ]?

Translated into English that means: optionally, the shape and/or the size, in either order, optionally followed by the keyword at and the position.

The shape is one of the keywords circle or ellipse. The size can be given as a closest/farthest-side/corner keyword or it can be given as explicit radius lengths. Circles have one radius length, ellipses have two: horizontal radius first, then vertical radius. The shape is optional when you use lengths for the size, since it will be determined from the number of length values.

For elliptical gradients, the two radius values can also be specified as percentages of the image width and height, respectively. You cannot currently specify the size of a circular CSS gradient using percentages. Future versions of CSS gradients may adopt SVG’s method of calculating circular radius percentages proportional to the diagonal length; this is now used in the CSS Shapes module for circles.

The position of a CSS radial gradient is equivalent to the cx and cy attributes for SVG. It may be given as lengths or percentages, or as a combination of the keywords used for specifying CSS background position. The keyword at must be included, to distinguish position information from sizing information. The default position is at center, or at 50% 50%.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.